<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Cache" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title> 筑为智慧-建企经营管理系统 - 筑为科技 </title>
    <script src='/static/component/jquery_3.3.1.js'></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/4.2.0/fabric.js"></script>
</head>
<body>
<button onclick="downloadFabric(canvas, new Date().getTime())">导出</button>
<button onclick="resetss()">重置</button>
<button onclick="add_qianming()">添加签名</button>
<div id="scrollable" style="width: 80%;margin-left: 10%;height: 800px;margin-top: 30px;overflow: auto">
    <canvas id="canvas"></canvas>
</div>


<script>
    const canvas = new fabric.Canvas('canvas');
    canvas.setWidth(1000);
    canvas.setHeight(1000);




    // // 方式二（通过图片路径添加）
    // fabric.Image.fromURL('xxxxxx.png', (img) => {
    //     img.set({
    //         left: 100, // 图片相对画布的左侧距离
    //         top: 100, // 图片相对画布的顶部距离
    //         opacity: 1, // 图片透明度
    //         // 这里可以通过scaleX和scaleY来设置图片绘制后的大小，这里为原来大小的一半
    //         scaleX: 1,
    //         scaleY: 1
    //     });
    //
    //     img.set({
    //         transparentCorners: false,
    //         cornerColor: 'blue',
    //         cornerStrokeColor: 'red',
    //         borderColor: 'red',
    //         cornerSize: 12,
    //         padding: 10,
    //         cornerStyle: 'circle',
    //         borderDashArray: [3, 3],
    //     });
    //
    //     // 添加对象
    //     canvas.add(img);
    //
    // });

    function resetss() {
        window.location.reload()
    }

    function add_qianming(){
        fabric.Image.fromURL('yyy.png', (img) => {
            img.set({
                left: 200, // 图片相对画布的左侧距离
                top: 200, // 图片相对画布的顶部距离
            });
            img.set({
                transparentCorners: false,
                cornerColor: 'blue',
                cornerStrokeColor: 'red',
                borderColor: 'red',
                cornerSize: 12,
                padding: 10,
                cornerStyle: 'circle',
                borderDashArray: [3, 3],
            });
            canvas.add(img);

            // canvas.remove(img);
        });
    }





    fabric.Image.fromURL('xxx.jpg', (img) => {

        canvas.setWidth(img.width);
        canvas.setHeight(img.height);

        img.set({
            // 通过scale来设置图片大小，这里设置和画布一样大
            scaleX: canvas.width / img.width,
            scaleY: canvas.height / img.height,
        });
        // 设置背景
        canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
        canvas.renderAll();
    });




    // var zoom;canvas.on({
    //     // 鼠标滚动缩放
    //     "mouse:wheel": (e) => {
    //         zoom = (event.deltaY > 0 ? -0.1 : 0.1) + canvas.getZoom();
    //         zoom = Math.max(0.1, zoom); //最小为原来的1/10
    //         zoom = Math.min(3, zoom); //最大是原来的3倍
    //         zoomPoint = new fabric.Point(400, 400); // 中心点
    //         canvas.zoomToPoint(zoomPoint, zoom);
    //     },
    // })












    function download(url,name){
        $('<a>').attr({href:url,download:name})[0].click();
    }
    function downloadFabric(canvas,name){
        download(canvas.toDataURL(),name+'.png');
    }

























</script>
</body>
</html>




